<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <el-form ref="searchMap" class="serach_wrapper flex-space-between" :inline="true" :model="searchMap" @submit.native.prevent>
        <div class="search">
          <el-form-item prop="examMaterialName" size="small">
            <el-input v-model="searchMap.examMaterialName" placeholder="请输入资料名称" clearable @clear="handleReset()" @keyup.enter.native="handleSearch()" />
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit flex">
          <el-button icon="el-icon-plus" class="btn_primary" @click="handleAdd()">
            新增
          </el-button>
        </div>
      </el-form>
      <div class="table_container">
        <el-table stripe v-loading="examMaterialLoading" :data="examMaterialList">
          <el-table-column type="index" label="序号" header-align="center" align="center" width="80"></el-table-column>
          <el-table-column prop="examMaterialName" label="考试名称" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column prop="nickName" label="上传人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="上传时间" align="center"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <span type="text" class="tag_primary" size="small" @click="handleDetails(scope.row)">编辑</span>
              <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-if="total>0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getExamMaterialList" />
    </div>
    <el-dialog title="考试资料:" class="m_dialog" :visible.sync="dialogVisibleExamMaterial" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="examMaterialRules" label-width="120px" size="small">
        <el-form-item label="材料名称:" prop="examMaterialName">
          <el-input v-model="formData.examMaterialName" />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="formData.remark" />
        </el-form-item>
        <el-form-item label="考试内容：" prop="remark">
          <upload-drag @change="fileChange" v-model="formData.examMaterialFiles"></upload-drag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleExamMaterial = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listExamMaterial, addExamMaterial, getExamMaterialById, deleteExamMaterial, updateExamMaterial } from '@/api/examination'
import UploadDrag from '@/components/UploadFiles'
export default {
  data () {
    return {
      // 搜索数据
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数 
        examMaterialName: undefined,
      },
      // 考试资料数据
      formData: {},
      // 访客预约表单验证
      examMaterialRules: {
        examMaterialName: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
      },
      // 考试资料数据加载状态
      examMaterialLoading: false,
      // 条数
      total: 0,
      // 考试资料数据弹框状态
      dialogVisibleExamMaterial: false,
      // 标题
      title: '',
      // 考试数据列表数据
      examMaterialList: []
    };
  },
  created () {
    this.getExamMaterialList();
  },
  computed: {
    pageTitle () {
      return '考试资料'
    }
  },
  watch: {},
  methods: {
    getExamMaterialList () {
      this.examMaterialLoading = true;
      listExamMaterial(this.searchMap).then(res => {
        if (200 === res.code) {
          this.examMaterialList = res.rows
          this.total = res.total
          this.examMaterialLoading = false
        }
      })
    },
    // 查询
    handleSearch () {
      this.getExamMaterialList();
    },
    // 重置
    handleReset () {
      this.searchMap.examMaterialName = undefined
      this.getExamMaterialList()
    },
    // 点击资料详情
    handleDetails (row) {
      const examMaterialId = row.examMaterialId
      getExamMaterialById(examMaterialId).then(res => {
        this.reset()
        this.formData = res.data
        this.dialogVisibleExamMaterial = true
      })
    },
    handleDelete (row) {
      const examMaterialId = [row.examMaterialId]
      this.$confirm('是否确认编号为"' + examMaterialId + '"的数据项？').then(res => {
        return deleteExamMaterial(examMaterialId)
      }).then(() => {
        this.getExamMaterialList()
        this.$message.success('删除成功')
      })
    },
    // 点击新增考试资料
    handleAdd () {
      this.reset();
      this.dialogVisibleExamMaterial = true
    },
    reset () {
      this.formData = {
        examMaterialName: '', // 文件名
        remark: '', // 备注
        examMaterialFiles: [], // 文件列表
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 提交
    submitForm () {
      try {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const isAddOperation = this.formData.examMaterialId === undefined
            let method = isAddOperation ? addExamMaterial : updateExamMaterial
            let message = isAddOperation ? '新增成功' : '修改成功'
            const response = await method(this.formData)
            if (response.code === 200) {
              this.$message.success(message)
              this.getExamMaterialList()
              this.dialogVisibleExamMaterial = false
            }
          }
        })
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    fileChange (file) {
      this.formData.examMaterialFiles.push(file)
    }
  },
  components: {
    UploadDrag,
  }
}
</script>
<style lang='less' scoped>
</style>